<template>
    <el-card shadow="always">
        <div class="item">
            <div class="left">
                <span class="lable">昵称：</span>
                <span>{{ profileData.nickname }}</span>
            </div>
            <el-icon class="icon" @click="openEdit()">
                <EditPen />
            </el-icon>
        </div>
        <div class="item">
            <div class="left">
                <span class="lable">简介：</span>
                <span>{{ profileData.bio }}</span>
            </div>
            <el-icon class="icon" @click="openEdit()">
                <EditPen />
            </el-icon>
        </div>
        <el-dialog v-model="showEditDialog" title="修改个人信息" width="400px" @close="handleEditClose">
            <el-form>
                <el-form-item label="昵称">
                    <el-input v-model="editForm.nickname" />
                </el-form-item>
                <el-form-item label="简介">
                    <el-input v-model="editForm.bio" type="textarea" rows="4" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="handleEditClose">取消</el-button>
                <el-button type="primary" @click="handleEditSubmit">保存</el-button>
            </template>
        </el-dialog>
    </el-card>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus'
import { EditPen } from '@element-plus/icons-vue';
import { getUserProfile, editUserProfile } from '@/api/user';
import { useUserStore } from '@/store/user'
const userStore = useUserStore()

const showEditDialog = ref(false)
const editForm = ref({ nickname: '', bio: '' })
const profileData = ref({ nickname: '', bio: '' })

const getProfileData = async () => {
    try {
        const { profile } = await getUserProfile({})
        profileData.value = profile
    } catch (error) {
        console.error(error)
    }
}

const openEdit = () => {
    editForm.value.nickname = profileData.value.nickname || ''
    editForm.value.bio = profileData.value.bio || ''
    showEditDialog.value = true
}

const handleEditClose = () => {
    editForm.value.nickname = profileData.value.nickname || ''
    editForm.value.bio = profileData.value.bio || ''
    showEditDialog.value = false
}

const handleEditSubmit = async () => {
    try {
        await editUserProfile(editForm.value)
        ElMessage.success({ message: '用户个人资料修改成功', duration: 1000 })
        await getProfileData()
        userStore.nickname = editForm.value.nickname
        showEditDialog.value = false
    } catch (error) {
        console.error(error)
    }
}

onMounted(async () => {
    await getProfileData();
})
</script>
<style scoped lang="less">
.item {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.left {
    display: flex;
    align-items: center;
}

.lable {
    font-weight: bold;
    margin-right: 8px;
}

.icon {
    cursor: pointer;
    margin-left: 8px;
}
</style>